<!--&lt;!&ndash;<template>&ndash;&gt;-->
<!--&lt;!&ndash;  <div id="app">&ndash;&gt;-->
<!--&lt;!&ndash;    <nav>&ndash;&gt;-->
<!--&lt;!&ndash;      <router-link to="/">主页</router-link> |&ndash;&gt;-->

<!--&lt;!&ndash;      <router-link to="/product">商城</router-link>|&ndash;&gt;-->
<!--&lt;!&ndash;&lt;!&ndash;      <router-link to="/test">test</router-link>|&ndash;&gt;&ndash;&gt;-->
<!--&lt;!&ndash;      <router-link to="/cart">Cart</router-link> |&ndash;&gt;-->
<!--&lt;!&ndash;      <router-link to="/login">Login</router-link> |&ndash;&gt;-->
<!--&lt;!&ndash;      <router-link to="/profile">profile</router-link> |&ndash;&gt;-->
<!--&lt;!&ndash;      <router-link to="/orders">orders</router-link> |&ndash;&gt;-->
<!--&lt;!&ndash;      <router-link to="/orders/:cartId">orderUser</router-link> |&ndash;&gt;-->

<!--&lt;!&ndash;    </nav>&ndash;&gt;-->

<!--&lt;!&ndash;&lt;!&ndash;    <HeaderComponent/>&ndash;&gt;&ndash;&gt;-->
<!--&lt;!&ndash;    &lt;!&ndash; route view will be rendered here &ndash;&gt;&ndash;&gt;-->
<!--&lt;!&ndash;    <router-view/>&ndash;&gt;-->
<!--&lt;!&ndash;&lt;!&ndash;    <TailderComponent/>&ndash;&gt;&ndash;&gt;-->
<!--&lt;!&ndash;  </div>&ndash;&gt;-->
<!--&lt;!&ndash;</template>&ndash;&gt;-->


<!--&lt;!&ndash;<script>&ndash;&gt;-->
<!--&lt;!&ndash;// import HeaderComponent from '@/components/HeaderComponent.vue'&ndash;&gt;-->
<!--&lt;!&ndash;// import TailderComponent from "@/components/TailderComponent.vue";&ndash;&gt;-->

<!--&lt;!&ndash;export default {&ndash;&gt;-->
<!--&lt;!&ndash;  name: 'App',&ndash;&gt;-->
<!--&lt;!&ndash;  components: {&ndash;&gt;-->
<!--&lt;!&ndash;    // HeaderComponent,&ndash;&gt;-->
<!--&lt;!&ndash;    // TailderComponent&ndash;&gt;-->
<!--&lt;!&ndash;  },&ndash;&gt;-->
<!--&lt;!&ndash;}&ndash;&gt;-->
<!--&lt;!&ndash;</script>&ndash;&gt;-->

<!--&lt;!&ndash;<style>&ndash;&gt;-->
<!--&lt;!&ndash;#app {&ndash;&gt;-->
<!--&lt;!&ndash;  font-family: Avenir, Helvetica, Arial, sans-serif;&ndash;&gt;-->
<!--&lt;!&ndash;  -webkit-font-smoothing: antialiased;&ndash;&gt;-->
<!--&lt;!&ndash;  -moz-osx-font-smoothing: grayscale;&ndash;&gt;-->
<!--&lt;!&ndash;  text-align: center;&ndash;&gt;-->
<!--&lt;!&ndash;  color: #2c3e50;&ndash;&gt;-->
<!--&lt;!&ndash;}&ndash;&gt;-->

<!--&lt;!&ndash;nav {&ndash;&gt;-->
<!--&lt;!&ndash;  padding: 30px;&ndash;&gt;-->
<!--&lt;!&ndash;}&ndash;&gt;-->

<!--&lt;!&ndash;nav a {&ndash;&gt;-->
<!--&lt;!&ndash;  font-weight: bold;&ndash;&gt;-->
<!--&lt;!&ndash;  color: #2c3e50;&ndash;&gt;-->
<!--&lt;!&ndash;}&ndash;&gt;-->

<!--&lt;!&ndash;nav a.router-link-exact-active {&ndash;&gt;-->
<!--&lt;!&ndash;  color: #42b983;&ndash;&gt;-->
<!--&lt;!&ndash;}&ndash;&gt;-->
<!--&lt;!&ndash;</style>&ndash;&gt;-->
<!--<template>-->
<!--  <div id="app">-->
<!--    <router-view/>-->
<!--    <nav>-->
<!--      &lt;!&ndash;      <router-link to="/">主页</router-link> |&ndash;&gt;-->
<!--      <router-link to="/">商城</router-link>|-->
<!--      <router-link to="/product">商品详情</router-link> |-->
<!--      <router-link to="/cart">Cart</router-link> |-->
<!--      <router-link to="/login">Login</router-link> |-->
<!--      <router-link to="/profile">profile</router-link> |-->
<!--    </nav>-->
<!--  </div>-->
<!--</template>-->


<!--<script>-->

<!--</script>-->

<!--<style>-->
<!--#app {-->
<!--  font-family: Avenir, Helvetica, Arial, sans-serif;-->
<!--  -webkit-font-smoothing: antialiased;-->
<!--  -moz-osx-font-smoothing: grayscale;-->
<!--  text-align: center;-->
<!--  color: #2c3e50;-->
<!--}-->

<!--nav {-->
<!--  padding: 30px;-->
<!--}-->

<!--nav a {-->
<!--  font-weight: bold;-->
<!--  color: #2c3e50;-->
<!--}-->

<!--nav a.router-link-exact-active {-->
<!--  color: #42b983;-->
<!--}-->
<!--</style>-->


<template>
  <div id="app">
    <router-view/>
    <!--引入底部导航栏-->
    <foot-component
        :cart-count="cartCount"
        :current-path="$route.path"
        @navigate="handleNavigate"
    />
  </div>
</template>

<script>
import FootComponent from '@/components/product/FootComponent.vue'
import axios from "axios";
export default {
  name: 'App',
  components: {
    'foot-component': FootComponent
  },
  data() {
    return {
      cartCount: ''
    }
  },
  methods: {
    // 处理底部导航点击事件
    handleNavigate(path) {
      //要求不要跳转到当前页面
      if (this.$route.path === path) {
        return;
      }
      this.$router.push(path);
    },
    //获取购物车数量
    async getCartCount() {
      try {
        const response = await axios.get('/api/cart/getCartCount');
        this.cartCount = response.data;
      } catch (error) {
        console.error('获取购物车数量失败:', error);
      }
    },
  },
  mounted() {
    this.getCartCount();
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}

nav {
  padding: 30px;
}

nav a {
  font-weight: bold;
  color: #2c3e50;
}

nav a.router-link-exact-active {
  color: #42b983;
}
</style>